<template>
  <div class="app-container">
    <el-card>
      <el-select
        v-model="language"
        style="margin-left: 20px;"
        placeholder="请选择语言"
        @change="listStatus"
      >
        <el-option
          v-for="item in languageOptions"
          :key="item.num"
          :label="item.label"
          :value="item.num"
        />
      </el-select>
      <el-select
        v-model="result"
        clearable
        style="margin-left: 20px;"
        placeholder="请选择结果"
        @change="listStatus"
      >
        <el-option
          v-for="item in resultMap"
          :key="item.num"
          :style="{color: resultMap[item.num].color}"
          :label="item.result"
          :value="item.num"
        />
      </el-select>
      <el-button type="primary" style="margin-left: 1rem" :loading="loading" @click="detection">提交评测</el-button>
      <el-dialog
        title="团队信息"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :visible.sync="dialogVisible"
        top="7vh"
        width="60%"
      >
        <el-table :data="resultData" stripe>
          <el-table-column prop="solutionIdOne" label="评测编号一" />
          <el-table-column prop="solutionIdTwo" label="评测编号二" />
          <el-table-column prop="ratio" label="相似度" />
        </el-table>
      </el-dialog>
      <el-table
        :data="tableData"
        stripe
        :default-sort="{prop: 'inDate', order: 'ascending'}"
        @sort-change="headerClick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="solutionId" label="评测编号" />
        <el-table-column prop="nick" label="用户">
          <template slot-scope="scope">
            <div v-if="!scope.row.nick" style="color: #e74c3c">已注销</div>
            <el-link v-if="scope.row.nick" type="primary" @click="goProfile(scope.row.userId)">{{ scope.row.nick }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="结果" width="200">
          <template slot-scope="scope">
            <el-link :style="{color: resultMap[scope.row.result].color,fontWeight: 'bold'}" @click="goCode(scope.row.solutionId)">
              {{ resultMap[scope.row.result].result }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="memory" label="内存" sortable>
          <template slot-scope="scope">
            {{ scope.row.memory }} KB
          </template>
        </el-table-column>
        <el-table-column prop="time" label="耗时" sortable>
          <template slot-scope="scope">
            {{ scope.row.time }} ms
          </template>
        </el-table-column>
        <el-table-column prop="language" label="语言">
          <template slot-scope="scope">
            {{ showLanguage(scope.row.language).label }}
          </template>
        </el-table-column>
        <el-table-column prop="codeLength" label="代码长度" sortable>
          <template slot-scope="scope">
            {{ scope.row.codeLength }} bytes
          </template>
        </el-table-column>
        <el-table-column prop="inDate" label="提交时间" sortable width="200" />
      </el-table>
      <el-pagination
        style="margin-top: 20px;"
        background
        :current-page="currentPage"
        :page-sizes="[10, 20, 35, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-card style="margin-top: 1rem">
      <el-table :data="duplicateData" stripe>
        <el-table-column prop="solutionIdOne" label="评测编号一" />
        <el-table-column prop="solutionIdTwo" label="评测编号二" />
        <el-table-column prop="ratio" label="相似度" />
      </el-table>
      <el-pagination
        style="margin-top: 20px;"
        background
        :current-page="currentPage1"
        :page-sizes="[10, 25, 50, 100]"
        :page-size="pageSize1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum1"
        @size-change="handleSizeChange1"
        @current-change="handleCurrentChange1"
      />
    </el-card>
  </div>
</template>

<script>
import { languageOptions, resultMap } from '@/utils/global'
import { detection, listDuplicate, listStatus } from '@/api/solution'

export default {
  data() {
    return {
      tableData: [],
      language: 0,
      result: 4,
      currentPage: 1,
      pageSize: 10,
      sort: 7,
      totalNum: 0,
      multipleSelection: [],
      resultData: [],
      loading: false,
      dialogVisible: false,
      languageOptions: languageOptions,
      resultMap: resultMap,
      duplicateData: [],
      currentPage1: 1,
      pageSize1: 10,
      totalNum1: 0
    }
  },
  created() {
    this.listStatus()
    this.listDuplicate()
  },
  methods: {
    detection() {
      const solutionIds = this.multipleSelection.map(t => t.solutionId).toString()
      if (this.multipleSelection.length < 2) {
        this.$message.info('请选择不少于两条的评测记录进行对比')
        return
      }
      this.loading = true
      this.$message.success('相似度检测中')
      detection({ solutionIds: solutionIds, language: this.language }).then(res => {
        this.resultData = res.data
        this.dialogVisible = true
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    listDuplicate() {
      listDuplicate({ current: this.currentPage1, size: this.pageSize1 }).then(res => {
        this.totalNum1 = parseInt(res.data.total)
        this.duplicateData = res.data.records
      })
    },
    listStatus() {
      listStatus({
        current: this.currentPage,
        size: this.pageSize,
        sort: this.sort,
        languageList: this.language,
        listResult: this.result
      }).then(res => {
        this.totalNum = parseInt(res.data.total)
        this.tableData = res.data.records
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    headerClick(event) {
      const params = [['memory', 1], ['time', 3], ['codeLength', 5], ['inDate', 7]]
      const sortMap = new Map(params)
      if (event.order === null) {
        this.sort = 8
        this.listStatus()
        return
      }
      if (event.order === 'descending') {
        sortMap.set(event.prop, sortMap.get(event.prop) + 1)
      }
      this.sort = sortMap.get(event.prop)
      this.listStatus()
    },
    showLanguage(item) {
      return this.languageOptions.find(t => t.num === Number(item))
    },
    goProfile(userId) {
      this.$router.push({
        path: '/profile',
        query: { userId: userId }
      })
    },
    goCode(solutionId) {
      this.$router.push({
        path: '/code',
        query: { solutionId: solutionId }
      })
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.listStatus()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.listStatus()
    },
    handleSizeChange1(size) {
      this.pageSize1 = size
      this.listDuplicate()
    },
    handleCurrentChange1(currentPage) {
      this.currentPage1 = currentPage
      this.listDuplicate()
    }
  }
}
</script>

<style scoped>

</style>
